<script setup lang="ts">
import Nav from '@/components/common/Nav.vue'
import { Bag } from '@vicons/ionicons5'
import { Ref } from 'vue'
import { useRouter } from 'vue-router'
import { Labels, NavProp } from '@c/common/BoxTypes.ts'
const router = useRouter()

const clickLabelHandle = (label: Labels) => {
  router.push({
    path: label.router,
    replace: true
  })
}
const navProp: Ref<NavProp> = ref<NavProp>({
  title: '商城',
  titleIcon: shallowRef(Bag),
  labels: [
    {
      name: '首页',
      router: '/mall/home'
    },
    {
      name: '推荐',
      router: '/community/test'
    },
    {
      name: '购物车',
      router: '/community/home'
    },
    {
      name: '订单',
      router: '/community/test'
    },
    {
      name: '反馈',
      router: '/community/test'
    }
  ]
})
</script>

<template>
  <Nav :navProp="navProp" @clickLabelHandle="clickLabelHandle"></Nav>
  <div style="width: 100%; background-color: rgb(225 225 225 / 80%)">
    <router-view />
  </div>
</template>

<style scoped lang="scss"></style>
